<template>
  <div class="home" :class="{show: loaded}">
    <van-nav-bar :border="false" fixed custom-style="background: transparent;">
      <template #title>
        <div class="title">
          江苏中恩网络科技有限公司
        </div>
      </template>
    </van-nav-bar>

    <!-- 背景色 -->
    <div class="bg"></div>

    <!-- 占位高度 -->
    <div :style="{height: navHeight}"></div>

    <ze-scroll :exclude-tabbar="true" @scrolltolower="handleScrolltolower">
      <!-- banner -->
      <image
        class="banner"
        src="https://oa.zeweb.org.cn/api/admin/sys-file/zeoa/9d2e0f39d17d46b4a25fbd0b73ac000e.png"
      />
      <!-- 主体内容 -->
      <div class="main">
        <!-- 通知 -->
        <van-notice-bar
          left-icon="volume-o"
          background="#EBF0F9"
          color="#739ECA"
          text="善用工具，事半功倍。"
        />

        <!-- 入口 -->
        <!-- <div class="entrances">
          <div class="entrance" :style="{backgroundImage: `url(${entrances[0].imgUrl})`}" @click="$emit('click-left')">
            <div class="entrance-title">
              {{ entrances[0].title }}
            </div>
            <div class="entrance-desc">
              {{ entrances[0].desc }}
            </div>
          </div>
          <div class="entrance" :style="{backgroundImage: `url(${entrances[1].imgUrl})`}" @click="$emit('click-right')">
            <div class="entrance-title">
              {{ entrances[1].title }}
            </div>
            <div class="entrance-desc">
              {{ entrances[1].desc }}
            </div>
          </div>
        </div> -->

        <!-- 资讯栏目 -->
        <ze-news ref="zeNewsRef" :types="newsTypes" />
      </div>
    </ze-scroll>
  </div>
</template>

<script>
import ZeScroll from '@/components/ze-scroll/index.vue'
import ZeNews from '@/components/ze-news/index.vue'
import { getDeviceInfo } from '@/utils/storage'

export default {
  components: { ZeScroll, ZeNews },
  props: {
    /** 入口 */
    entrances: {
      type: Array,
      default: () => [],
    },
    /** 资讯分类 */
    newsTypes: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loaded: false,
      navHeight: '0px',
    }
  },
  mounted() {
    this.calcNavHeight()
  },
  methods: {
    handleScrolltolower() {
      this.$refs.zeNewsRef.loadMore()
    },
    calcNavHeight() {
      const { navbarHeight, statusBarHeight } = getDeviceInfo()
      this.navHeight = `${navbarHeight + statusBarHeight + 10}px`
      this.loaded = true
    },
  },
}
</script>

<style lang="scss" scoped>
.home {
  opacity: 0;
  &.show {
    opacity: 1;
  }
}

.title {
  color: #fff;
  width: 148px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.banner {
  width: 345px;
  height: 140px;
  margin: 0 auto;
  display: block;
}

.main {
  padding: 0 15px;
  margin-top: 10px;
  background-color: #fff;

  .entrances {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .entrance {
      width: 167px;
      height: 78px;
      background-size: cover;
      background-position: right 0 top 0;
      background-repeat: no-repeat;
      border-radius: 3px;
      color: #6391BF;
      box-sizing: border-box;
      padding: 15px 10px;

      .entrance-title {
        font-size: 16px;
        font-weight: 500;
        line-height: 16px;
      }
      .entrance-desc {
        margin-top: 5px;
        font-size: 10px;
        line-height: 10px;
      }
    }
  }
}

.bg {
  height: 106px;
  background: linear-gradient(180deg, #23479B 0%, #36B1D4 100%);
  backdrop-filter: blur(40px);
  position: fixed;
  top: 0;
  width: 100%;
}
</style>
